<template>
  <div class="form-comp">
    <div class="toolbar-item toolbar-select"
         v-if="label"
    >
      <el-input size="default"
                :style="{width:(label.length==2?'68px':label.length==3?'82px':label.length==4?'96px':label.length==7?'138px':label.length==6?'128px':''),float:'left'}">
        <template #prepend>{{ label }}</template>
      </el-input>
      <el-radio-group v-model="compValue"
                      :class="label.length==3?'prepend-3':label.length==4?'prepend-4':label.length==5?'prepend-5':label.length==6?'prepend-6':label.length==7?'prepend-7':'prepend-2'"
      >
        <el-radio v-for="(item) in compData" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </div>
    <el-radio-group v-model="compValue"
                    v-else
    >
      <el-radio v-for="(item) in compData" :label="item.value">{{ item.label }}</el-radio>
    </el-radio-group>
  </div>
</template>

<script lang="ts" setup>
//定义组件名称
// @ts-ignore
import {getCurrentInstance, onMounted, ref, watch} from "vue";

defineOptions({
  name: "FormDictRadio"
});

const props = defineProps({
  label: {type: String, required: false},
  value: {type: String, required: true},
  dictType: {type: String, required: true},
  disabled: {type: Boolean, required: false}
});

//组件的值
const compValue = ref(props.value);

const emit = defineEmits(['update:value'])

onMounted(() => {
  loadData();
})

//监听变化
watch(() => props.value, () => {
  compValue.value = props.value;
})

//监听变化返回
watch(() => compValue.value, () => {
  emit("update:value", compValue.value)
})
const compData = ref<any>([]);
// @ts-ignore
let {proxy} = getCurrentInstance()

//获取字典列表
function loadData() {
  proxy.$http.post("/user-center/dict/findType", {'dictType': props.dictType}).then((res: any) => {
    compData.value = res.data;
    compValue.value = props.value;
  });
}


</script>

<style scoped>

</style>
